<template>
  <div class="order-con">
    <div class="navbar">
      <div class="back" @click="goBack"></div>
      <div class="nav-title">确认订单</div>
    </div>
    <div class="block location-info" @click="toMyAdress" v-if="hasAdress">
      <div class="location-left">
        <img src="../../assets/img/order/location.png" alt="" width="40px" />
      </div>
      <div class="location-center">
        <div class="user-base-info">
          <span style="font-size: 15px">{{ myAdress.name }}</span>
          <span style="color: #b9b9b9">{{ myAdress.tel }}</span>
        </div>
        <div class="user-location-info">
          <span>{{ myAdress.location }}</span>
        </div>
        <div class="user-add">
          <span style="color: orange; font-weight: 1000"
            >收货不便时，可选择暂存服务</span
          >
        </div>
      </div>
      <div class="location-right">
        <div class="right-arrow">
          <img
            src="../../assets/img/order/right-arrow.png"
            alt=""
            width="11px"
          />
        </div>
      </div>
    </div>
    <div class="block location-info" v-else @click="toMyAdress">
      <div class="location-left">
        <img src="../../assets/img/order/location.png" alt="" width="40px" />
      </div>
      <div class="location-center">
        <div class="user-add">
          <span style="color: orange; font-weight: 1000"
            >暂未选择地址，请选择收获地址</span
          >
        </div>
      </div>
      <div class="location-right">
        <div class="right-arrow">
          <img
            src="../../assets/img/order/right-arrow.png"
            alt=""
            width="11px"
          />
        </div>
      </div>
    </div>
    <div class="block goods-info">
      <div
        class="goods-info-top"
        v-for="(item, index) in orderList"
        :key="index"
      >
        <div class="img-con">
          <!-- <img :src="item.img" alt="" width="80px" /> -->
          <img :src="circleUrl + item.img" width="100px" />
        </div>
        <div class="goods-title">
          <div style="height: 40px">{{ item.title }}</div>
          <div style="color: #ffd116">发货时间：付款后3天内</div>
        </div>
        <div class="goods-price">
          <div>{{ item.sell_price }}</div>
          <div style="text-align: right; color: gray">x{{ item.number }}</div>
        </div>
      </div>
      <div class="goods-info-bottom">
        <div class="postage">
          <div class="way">配送方式</div>
          <div class="normal">普通配送</div>
          <div class="postage-price">快递 免邮</div>
        </div>
        <div class="total">
          <div class="total-price">
            <span style="color: #b9b9b9; font-size: 13px"
              >共{{ totalNumber }}件,</span
            >
            <span>合计:</span>
            <span style="color: #f27633">￥{{ totalPrice }}</span>
            <span v-if="discountStr.total > 0">
              &nbsp;优惠<span class="danger">￥{{ discountStr.total }}</span>
            </span>
          </div>
          <div class="submitOrder" @click="changeDiscountStatus">提交订单</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      circleUrl: "http://localhost:9528/admin/news_info/downloadPic?img_url=",
      username: "",
      order_no: "",
      selectedId: "",
      hasAdress: false,
      myAdress: [],
      orderList: [],
    };
  },
  computed: {
    totalNumber() {
      let sum = 0;
      this.orderList.forEach((item) => {
        sum += item.number;
      });
      return sum;
    },
    totalPrice() {
      return (this.amount - this.discountStr.total).toFixed(2);
    },
    ...mapGetters(["idstr", "amount", "discountStr"]),
  },
  created() {
    if (localStorage.getItem("UserInfo")) {
      this.username = window.JSON.parse(
        localStorage.getItem("UserInfo")
      ).username;
    }
    if (localStorage.getItem("order_no")) {
      this.order_no = localStorage.getItem("order_no");
    }
    this.getSelectedId();
    this.getOrder();
  },
  activated() {
    this.getSelectedId();
  },
  methods: {
    ...mapMutations(["delFromCart"]),
    goBack() {
      this.$router.push("/idssp/shopcar");
    },
    getSelectedId() {
      this.$http
        .get("/getSelectedId", {
          params: {
            username: this.username,
          },
        })
        .then((res) => {
          if (res.data.errcode === 200) {
            const data = res.data.message;
            this.selectedId = data[0].selectedId;
            this.getMyAdress();
          } else {
            this.selectedId = "";
          }
        });
    },
    // 获得地址
    getMyAdress() {
      this.$http
        .get("/getAdressById", {
          params: {
            selectedId: this.selectedId,
          },
        })
        .then((res) => {
          if (res.data.errcode === 200) {
            const data = res.data.message;
            if (data.length > 0) {
              this.myAdress = data[0];
              this.hasAdress = true;
            } else {
              this.hasAdress = false;
            }
          } else {
            this.myAdress = [];
            this.hasAdress = false;
          }
        });
    },
    // 获得订单
    getOrder() {
      this.$http
        .get("/getOrder", {
          params: {
            username: this.username,
            order_no: this.order_no,
          },
        })
        .then((res) => {
          if (res.data.errcode === 200) {
            let data = res.data.message;
            this.orderList = data;
          } else {
            this.orderList = [];
          }
        });
    },
    toMyAdress() {
      this.$router.push("/idssp/order/myAdress");
    },
    submit() {
      let goodsInfo = [];
      this.orderList.forEach((item) => {
        goodsInfo.push({
          goods_no: item.goods_no,
          stock_quantity: item.stock_quantity - item.number,
        });
      });
      // 提交订单后，改变订单状态和库存
      if (this.hasAdress) {
        let params = {
          username: this.username,
          order_no: this.order_no,
          goodsInfo: goodsInfo,
          status: 1,
          disList:this.discountStr.disList
        };
        this.$http.post("/submitOrder", params).then((res) => {
          if (res.data.errcode === 200) {
            Toast("提交成功!!!");
            // 点击结支付后，清空购物车
            let idList = this.idstr.split(",");
            idList.forEach((item) => {
              this.delFromCart(item);
            });
            let emptyGoodsList = [];
            goodsInfo.forEach((item) => {
              if (item.stock_quantity < 0 || item.stock_quantity == 0) {
                emptyGoodsList.push({ goods_no: item.goods_no });
              }
            });
            // 如果商品减掉库存后，库存不足，则删除商品
            if (emptyGoodsList.length > 0) this.delGoods(emptyGoodsList);
            // 点击结算后，将优惠券状态变为 2 已使用。
            this.$router.push({
              path: "/idssp/order/paySuccess",
              query: {
                order_no: this.order_no,
                status: 1,
              },
            });
          } else {
            Toast("提交失败!!!");
          }
        });
      } else {
        Toast("收货地址尚未填写!!!");
      }
    },
    // 首先要根据vuex里面计算出来的每个商品使用的优惠券，找出其对应的id，再根据id去修改
    changeDiscountStatus() {
      let params = {
        dis_id_list: this.discountStr.disIdList,
      };
      this.$http.post("/changeDiscountStatus", params).then((res) => {
        if (res.data.errcode === 200) {
          Toast(this.discountStr.discountStrList + "优惠券使用成功！！！");
          this.submit()
        } else {
          Toast("优惠券使用失败！！！");
        }
      });
    },
    delGoods(emptyGoodsList) {
      let params = {
        goods_no_list: emptyGoodsList,
      };
      this.$http.post("/delGoodsInfo", params).then((res) => {
        if (res.data.errcode === 200) {
          Toast("删除成功！！！");
        } else {
          Toast("删除失败！！！");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.order-con {
  font-size: 13px;
  background-color: #eee;
  overflow: hidden;
  padding-top: 43px; //如果不写则页面会显示不完全
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    width: 100%;
    height: 44px;
    background-color: #e25b45;
    text-align: center;
    color: white;
    font-size: 16px;
    align-items: center;
    .back {
      width: 50px;
      height: 100%;
      position: absolute;
      left: 20px;
      background: url("../../assets/img/back.png") no-repeat;
      background-size: 40% 40%;
      background-position-y: center;
    }
    .nav-title {
      margin: 0 auto;
    }
  }
  .block {
    margin: 10px;
    width: 95%;
    background-color: #fff;
    border-radius: 10px;
  }
  .location-info {
    display: flex;
    justify-content: space-between;
    .location-left {
      padding-left: 10px;
      display: flex;
      align-items: center;
    }
    .location-center {
      padding: 15px;
      .user-location-info {
        padding: 5px 0;
        line-height: 14px;
      }
    }
    .location-right {
      display: flex;
      align-items: center;
      padding-right: 10px;
    }
  }
  .goods-info {
    padding: 10px 10px;
    .goods-info-top {
      width: 100%;
      justify-content: space-between;
      display: flex;
      .goods-title {
        width: 190px;
        margin-top: 12px;
      }
      .goods-price {
        margin-top: 12px;
      }
    }
    .goods-info-bottom {
      margin-top: 10px;
      .postage {
        display: flex;
        justify-content: space-between;
        .way {
          width: 80px;
          text-align: right;
        }
        .normal {
          color: #b9b9b9;
          width: 180px;
        }
      }
      .total {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 44px;
        background-color: #fff;
        line-height: 44px;
        display: flex;
        font-size: 15px;
        .total-price {
          width: 260px;
          text-align: right;
          .danger {
            color: red;
            font-weight: bold;
            font-size: 16px;
          }
        }
        .submitOrder {
          margin: 2px 10px;
          background-color: #fd5e01;
          color: #fff;
          width: 100px;
          height: 34px;
          border-radius: 50px;
          text-align: center;
          line-height: 34px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>